<template>
	<!-- 报名人员信息 -->
	<view class="" style="padding: 0 35rpx;">

		<view style="background-color: #fff;border-radius: 10rpx;padding: 35rpx;"
			@click="navTo(`/notice/details?NoticeID=${SignUpDetail.Notice.NoticeID}` )">
			<view class="flexbc" style="margin-top: 24rpx;">
				<view class="noticeTitle">
					<text v-if="SignUpDetail.Notice.Roles">招募 {{ JSON.parse(SignUpDetail.Notice.Roles).text }}</text>
					<text style="margin-left:0rpx">・</text>
					<text v-if="SignUpDetail.Notice.PriceType && JSON.parse(SignUpDetail.Notice.PriceType).value === 1">
						<text>¥</text>
						<text
							v-if="SignUpDetail.Notice.PriceQujian === 0">{{ SignUpDetail.Notice.Price | formatPrice }}</text>
						<text v-else>{{ SignUpDetail.Notice.StartPrice | formatPrice }} ~
							{{ SignUpDetail.Notice.EndPrice | formatPrice }}</text>
						<text v-if="SignUpDetail.Notice.Unit">{{ JSON.parse(SignUpDetail.Notice.Unit).result }}</text>
					</text>
					<text v-else>{{ JSON.parse(SignUpDetail.Notice.PriceType).result }}</text>
				</view>
				<view style="display: flex; align-items: center;">
					<fui-icon name="location" :size="28"></fui-icon>
					<text class="onCity">{{ SignUpDetail.Notice.City?SignUpDetail.Notice.City:'全国' }}</text>
				</view>
			</view>

			<view class="flexbc" style="padding-bottom:20rpx;">
				<view class="leftTexts">
					<view class="noticeMemo">{{SignUpDetail.Notice.NoticeMemo}}</view>
					<view class="userlabel">
						<view>{{ SignUpDetail.Notice.ClassName }}</view>
						<view v-if="SignUpDetail.Notice.SexLimit">
							性别要求：{{ JSON.parse(SignUpDetail.Notice.SexLimit).text }}</view>
					</view>
				</view>
			</view>
		</view>


		<view class=""
			style="background-color: #fff;border-radius: 10rpx;padding: 35rpx;display: flex; flex-direction: row; justify-content: space-between; align-items: center;margin-top: 20rpx;">
			<view class=""
				style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
				<image :src="SignUpDetail.SignUpInfo.SignupWxHeadPic" mode=""
					style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
				<view class="" style="margin-left: 20rpx;">
					<view class="" style="font-size: 26rpx;" v-if="SignUpDetail.SignUpInfo">
						<text>{{ SignUpDetail.SignUpInfo.SignupNickName }}</text>
					</view>
					<view class="" style="font-size: 24rpx; margin-top: 10rpx;"
						v-if="SignUpDetail.SignUpInfo.UserRoles">
						<text v-for="(itm, idx) in SignUpDetail.SignUpInfo.UserRoles" :key="idx">
							<text> {{ itm.LabelName }} </text>
							<text v-if="idx != (SignUpDetail.SignUpInfo.UserRoles.length - 1)"
								style="padding: 0 10rpx;">·</text>
						</text>
					</view>
				</view>
			</view>
			<view class="">
				<view class="" style="font-size: 22rpx;color: #cfcfcf;">
					{{ $common.timeDiff( SignUpDetail.SignUpInfo.addTime , new Date()) }}
				</view>
				<view class="" style="font-size: 24rpx;color: #bfbfbf;text-align: right; margin-top: 10rpx;"
					@click="navTo('/pages/index/complaint/index')">
					<text>投诉</text>
				</view>
			</view>
		</view>
		<view class="" style="background-color: #fff;border-radius: 10rpx;padding: 35rpx;margin-top: 20rpx;">
			<view class="" style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;">
				<text class="" style="width: 8rpx;height: 30rpx;background-color: #FFDD00;"></text>
				<text class="" style="font-size: 26rpx;margin-left: 20rpx;">对方报名信息</text>
			</view>
			<view class="" style="font-size: 24rpx;margin-top: 20rpx;">
				报名备注: {{ SignUpDetail.SignUpInfo.SignupMemo }}
			</view>
		</view>

		<view class="" style="background-color: #fff;border-radius: 10rpx;padding: 35rpx; margin-top: 20rpx;">
			<view class="" style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;">
				<view class="" style="width: 8rpx;height: 30rpx;background-color: #FFDD00;"></view>
				<view class="" style="font-size: 26rpx;margin-left: 20rpx;">对方联系方式</view>
			</view>
			<view class="" style="margin-top: 20rpx;font-size: 24rpx;">
				<view class=""
					style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;">
					<text style="flex: 1;">联系人:</text>
					<text
						style="flex: 2;text-align: left;">{{ SignUpDetail.SignUpInfo.ContactName ? SignUpDetail.SignUpInfo.ContactName : '无' }}</text>
					<text style="flex: 1;"></text>
				</view>
				<view class=""
					style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;margin-top: 20rpx;">
					<text style="flex: 1;">微信号:</text>
					<text
						style="flex: 2;text-align: left;">{{ SignUpDetail.SignUpInfo.WeixinCode ?  SignUpDetail.SignUpInfo.WeixinCode : '无' }}</text>
					<text style="flex: 1;text-align: right; color:#68cee7;"
						@click="onCopy(SignUpDetail.SignUpInfo.WeixinCode,'微信号')">复制</text>
				</view>
				<view class=""
					style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;margin-top: 20rpx;">
					<text style="flex: 1;">手机号:</text>
					<text
						style="flex: 2;text-align: left;">{{ SignUpDetail.SignUpInfo.UserMobile ? SignUpDetail.SignUpInfo.UserMobile : '无' }}</text>
					<text style="flex: 1;text-align: right;color:#68cee7;"
						@click="onCopy(SignUpDetail.SignUpInfo.UserMobile,'手机号')">复制</text>
				</view>
				<view class=""
					style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;margin-top: 20rpx;">
					<text style="flex: 1;">QQ号:</text>
					<text
						style="flex: 2;text-align: left;">{{ SignUpDetail.SignUpInfo.QQCode ? SignUpDetail.SignUpInfo.QQCode : '无' }}</text>
					<text style="flex: 1;text-align: right;color:#68cee7;"
						@click="onCopy(SignUpDetail.SignUpInfo.QQCode,'QQ号')">复制</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		filters: {
			formatPrice(price) {
				if (price > 10000) {
					return price / 10000 + 'w';
				} else if (price > 1000) {
					return price / 1000 + 'k'
				} else {
					return parseInt(price, 10);
				}
			}
		},
		data() {
			return {
				options: {},
				SignUpDetail: {}
			}
		},
		onLoad(options) {
			// console.log('options', options)
			this.options = options
			this.getSignUpNoticeDetail()
		},
		onShow() {},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			onCopy(data, text) {
				uni.setClipboardData({
					data,
					showToast: false,
					success: res => {
						uni.showToast({
							title: `复制${text}成功`,
							icon: 'success'
						})
					}
				})
			},
			getSignUpNoticeDetail() {
				this.$httpost('/Notices/NoticesSignUpDeteil', this.options).then(res => {
					// console.log('notice', res)
					if (res.code == 200) {
						this.SignUpDetail = res.data;
						// console.log('this.SignUpDetail' , this.SignUpDetail)
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.noticeTitle {
		font-size: 32rpx;
		color: #333;
		font-weight: bold
	}

	.onCity {
		color: #999;
		margin-left: 10rpx;
		padding-bottom: 5rpx;
		font-size: 24rpx
	}

	.noticeMemo {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.userlabel {
		display: flex;
		margin-top: 20rpx;
		/* justify-content:center; */
	}

	.userlabel view {
		background-color: #e0e0e0;
		color: #666;
		font-size: 18rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
		padding: 6rpx 10rpx 6rpx 10rpx;
	}
</style>